import React from 'react'
import Loading from './Loading'
import NavBar from '../component/NavBar'
import asymeth from '../store/asyncMethod/asyncmethod'
import {
  connect, //  用于连接数据映射和修改数据映射方法的连接函数 返回值是一个新的组件
} from 'react-redux'
import { List } from 'antd-mobile'

const Item = List.Item
// const Brief = Item.Brief

class myApp extends React.Component {
  componentDidMount() {
    this.props.getBareerQuestionList()
    this.debounce()
  }
  render() {
    let BareerQuestionList = this.props.bareerQuestionList
    console.log(BareerQuestionList)
    if (BareerQuestionList.length === 0) {
      return (
        <div>
          <NavBar params={this.props} name="生涯答题"></NavBar>
          <Loading></Loading>
        </div>
      )
    } else {
      return (
        <div>
          <NavBar params={this.props} name="生涯答题"></NavBar>
          <List renderHeader={() => '所有题目'}>
            {BareerQuestionList.map((item, index) => {
              return (
                <Item
                  key={index}
                  thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                  arrow="horizontal"
                  onClick={() => {
                    this.daSomeQuestion(index)
                  }}
                >
                  {item.quiz}
                </Item>
              )
            })}
          </List>
        </div>
      )
    }
  }

  daSomeQuestion = item => {
    this.props.history.push('/singer', { type: 'Career', info: item })
  }

  // 防抖
  debounce = () => {
    let timer = null
    window.addEventListener('scroll', () => {
      clearTimeout(timer)
      timer = setTimeout(() => {
        this.scorllMove()
      }, 500)
    })
  }

  scorllMove = () => {
    // console.log('hello world')
    let scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop
    let clientHeight =
      document.documentElement.clientHeight || document.body.clientHeight
    let scrollHeight =
      document.documentElement.scrollHeight || document.body.scrollHeight

    if (scrollTop + clientHeight === scrollHeight) {
      this.loadMore()
    }
  }

  loadMore = () => {
    this.props.loadMoreBareerQuestion(this.props.bareerQuestionList.length)
  }
}

function mapStateToProps(state) {
  return {
    bareerQuestionList: state.bareerQuestionList,
  }
}

// 进啊给修改state数据的方法映射到props
function mapDispatchToProps(dispatch) {
  return {
    getBareerQuestionList: async () => {
      let res = await asymeth.getBareerQuestionList()
      if (res.data.code === 200) {
        dispatch({ type: 'setBareer', content: res.data.result })
        return
      }
      dispatch({ type: 'setBareer', content: [] })
    },
    loadMoreBareerQuestion: async num => {
      console.log('mm', num)
      let res = await asymeth.loadMoreQuestion({ page: num })
      console.log('hhh', res)
      if (res.data.code === 200) {
        dispatch({ type: 'addBareer', content: res.data.result })
        return
      }
      dispatch({ type: 'addBareer', content: [] })
    },
  }
}

const Career = connect(mapStateToProps, mapDispatchToProps)(myApp)

export default Career
